<template>
  <div class="view-wrapper">
    <div class="main">
      <div class="textList">
        <div class="list">ID：{{info.goodsId}}</div>
        <div class="list">卡名称：{{info.name}}</div>
      </div>
      <div class="textList">
        <div class="list">
          上架状态：
          <span v-if="info.sellStatus == 1">草稿</span>
          <span v-if="info.sellStatus == 2">销售中</span>
          <span v-if="info.sellStatus == 3">待上架</span>
          <span v-if="info.sellStatus == 4">待审核</span>
          <span v-if="info.sellStatus == 5">已拒绝</span>
        </div>
        <div class="list">最后修改时间：{{info.updateTime}}</div>
      </div>
    </div>
    <div class="main">
      <div class="main_top">
        <div class="lef">
          <div
            class="nav_list"
            v-for="item in typeList"
            :class="['list', currentNavtab == item.id ? 'active' : '']"
            :key="item.id"
            :value="item.id"
            @click="handleTab(item.id)"
          >
            {{ item.value }}
          </div>
        </div>
      </div>
      <template v-if="currentNavtab == 1">
        <div class="title">
          <div>基本信息</div>
          <div class="btnBox">
            <!-- <el-button type="primary"  @click="editStatus(info)" v-if="info.sellStatus == 3">上架</el-button>
            <el-button type="primary"  @click="editStatus(info)" v-if="info.sellStatus == 2">下架</el-button> -->

            <el-button type="primary"  @click="editClick(info,1)" v-if="info.sellStatus != 2">编辑</el-button>
          </div>
        </div>
        <div class="textList">
          <div class="list">
            卡名称：{{info.name}}
          </div>
          <div class="list" v-if="info.chainShopList.length > 0">
            所属/使用门店：<span v-for="(item,index) in info.chainShopList" :key="index">{{item.shopName}}、</span>
          </div>
          <div class="list" v-else>
            所属/使用门店：{{info.merchantName}}
          </div>
        </div>
        <div class="textList">
          <div class="list">赚卡有效期：{{info.expireDateBegin}}~{{info.expireDateEnd}}</div>
        </div>
        <div class="title">价格信息</div>
        <div class="textList">
          <div class="list">库存：{{info.issueTotal}}</div>
          <div class="list">原价：{{info.equityWorth}}元</div>
        </div>
        <div class="textList">
          <div class="list">销售价：{{info.price}}元</div>
          <div class="list">是否限购：
            <span v-if="info.limitBuyType == 1">不限购 </span>
            <span v-if="info.limitBuyType == 2">每人限购{{info.limitAmount}}件</span>
            <span v-if="info.limitBuyType == 3">未消费用户限购{{info.limitAmount}}件</span>
          </div>
        </div>
        <div class="title">主视图</div>
        <div class="inpBox">
          <div class="lable" style="width: 80px">缩略图：</div>
          <div class="imgBox">
            <img :src="info.thumbnail" alt=""> 
          </div>
        </div>
        <div class="inpBox" style="margin-top: 20px;">
          <div class="lable" style="width: 80px">头图：</div>
          <div class="imgBox">
            <img :src="item" v-for="(item,index) in info.coverList" :key="index" alt=""> 
          </div>
        </div>
        <div class="title">权益详情</div>
        <div class="textList">
          <div class="list">前端页面展示：{{info.equityDisplay == 1 ? '显示' : '隐藏'}}</div>
          <div class="list">权益标题展示：{{info.equityTitleStatus == 2 ? '启用' : '不启用'}}</div>
        </div>
        <el-row style="margin-bottom: 20px" v-if="info.equityTitleStatus == 1">
          <el-col :span="24">
            <el-table :data="info.equityList" border >
              <el-table-column label="权益序号"  type="index" width="100" />
              <el-table-column label="权益名称" align="center" prop="equityTitle" :show-overflow-tooltip="true"/>
              <el-table-column label="数量" align="center" prop="equityAmount" :show-overflow-tooltip="true"/>
              <el-table-column label="单件标价（￥）" align="center" prop="equityPrice" :show-overflow-tooltip="true"/>
            </el-table>
          </el-col>
        </el-row>
        <div class="title">权益说明</div>
        <div class="textList">
          <div class="list">前端页面展示：{{info.equityExplainDisplay == 1 ? '显示' : '隐藏'}}</div>
        </div>
        <div class="textList">
          <div class="list">{{info.equityExplain}}</div>
        </div>
        <el-row style="margin-bottom: 20px" v-if="info.equityTitleStatus == 2">
            <div class="equityList" v-for="(item,index) in info.equityTitleList" :key="index">
                <div class="tips">
                    <div class="list">标题{{index+1}}：{{item.equityTitle}}</div>
                    <div class="list" v-if="item.equityType == 1">权益类型：正常权益</div>
                    <div class="list" v-if="item.equityType == 2">权益类型：{{item.detailList.length}}选{{item.optionalQuantity}}</div>
                </div>
                <div class="detail" v-for="(bitem,bindex) in item.detailList" :key="100+bindex">
                  <div>权益{{bindex+1}}：{{bitem.equityTitle}}</div>
                  <div>数量：{{bitem.equityAmount}}</div>
                  <div>单价：{{bitem.equityPrice}}</div>
                </div>
            </div>
        </el-row>
        <div class="title">购买须知</div>
        <div class="textList">
          <div class="list">前端页面展示：{{info.buyDisplay == 1 ? '显示' : '隐藏'}}</div>
        </div>
        <div class="textList">
          <div class="list">{{info.buyNotes}}</div>
        </div>
        <div class="title">图文介绍</div>
        <div class="textList">
          <div class="list">前端页面展示：{{info.imageTextDisplay == 1 ? '显示' : '隐藏'}}</div>
        </div>
        <div class="inpBox">
          <div class="lable">图文介绍：</div>
          <div class="imgBox">
            <img :src="item" alt="" v-for="(item,index) in info.imageTextList" :key="index" />
          </div>
        </div>
      </template>
      <template v-if="currentNavtab == 2">
        <div class="title">
          <div>消费后激励活动</div>
          <div class="btnBox">
            <!-- <el-button type="primary"  @click="editStatus(info)" v-if="info.sellStatus == 3">上架</el-button>
            <el-button type="primary"  @click="editStatus(info)" v-if="info.sellStatus == 2">下架</el-button> -->
            <el-button type="primary"  @click="editClick(info,2)" v-if="info.sellStatus != 2">编辑</el-button>
          </div>
        </div>
        
        <div class="textList">
          <div class="list">活动状态：{{incentivePO.incentiveStatus == 1 ? '开启' : '关闭'}}</div>
        </div>
        <templata v-if="incentivePO.incentiveStatus == 1">
          <div class="textList">
            <div class="list">活动时间：{{incentivePO.startTime}}~{{incentivePO.endTime}}</div>
          </div>
          <div class="textList">
            <div class="list">
              <img v-if="incentivePO.cocoIncentive == 1" src="@/static/gouxuan.png" alt="" />
              <img v-if="incentivePO.cocoIncentive == 2" src="@/static/no_gou.png" alt="" />
              <div>完成每笔赚卡消费后，奖励 <span class="blue">{{incentivePO.cocoIncentiveAmount ? incentivePO.cocoIncentiveAmount : '-'}}</span> 个coco；活动库存 <span class="blue">{{incentivePO.cocoStock ? incentivePO.cocoStock : '-'}}</span> 份；</div>
            </div>
          </div>
          <div class="textList">
            <div class="list">
              <img v-if="incentivePO.tfIncentive == 1" src="@/static/gouxuan.png" alt="" />
              <img v-if="incentivePO.tfIncentive == 2" src="@/static/no_gou.png" alt="" />
              <div>完成每笔赚卡消费后，奖励<span class="blue">{{incentivePO.tfIncentiveAmount ? incentivePO.tfIncentiveAmount : '-'}}</span>个椰分；活动库存<span class="blue">{{incentivePO.tfStock ? incentivePO.tfStock : '-'}}</span> 份；</div>
            </div>
          </div>
          <div class="textList">
            <div class="list">
              <img v-if="incentivePO.medalIncentive == 1" src="@/static/gouxuan.png" alt="" />
              <img v-if="incentivePO.medalIncentive == 2" src="@/static/no_gou.png" alt="" />
              <div>完成每笔赚卡消费后，奖励  <span class="blue">{{incentivePO.equityCardName ? incentivePO.equityCardName : '-'}}</span>   勋章；</div>
            </div>
          </div>
          <el-row style="margin-bottom: 20px">
            <el-col :span="24">
              <el-table :data="equityInfoList" border>
                <el-table-column label="卡名称" align="center" prop="cardName" :show-overflow-tooltip="true"/>
                <el-table-column label="卡功能" align="center" prop="functionType" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <dict-tag :options="functionTypeList" :value="scope.row.functionType" />
                  </template>
                </el-table-column>
                <el-table-column label="发行方" align="center" prop="issuerName" :show-overflow-tooltip="true"/>
                <el-table-column label="上链时间" align="center" prop="chainTime" :show-overflow-tooltip="true"/>
                <el-table-column label="单价" align="center" prop="price" :show-overflow-tooltip="true"/>
                <el-table-column label="库存总量" align="center" prop="total" :show-overflow-tooltip="true"/>
                <el-table-column label="剩余库存" align="center" prop="usable" :show-overflow-tooltip="true"/>
              </el-table>
            </el-col>
          </el-row>
        </templata>
        
        <div class="title">同行助力激励活动</div>
        <div class="textList">
          <div class="list">活动状态：{{assistancePO.incentiveStatus == 1 ? '开启' : '关闭'}}</div>
        </div>
        <template v-if="assistancePO.incentiveStatus == 1">
          <div class="textList">
            <div class="list">活动库存数：{{assistancePO.stockStatus == 1 ? '不限制' : '限制'}}</div>
            <div class="list" v-if="assistancePO.stockStatus == 2">总库存：{{assistancePO.stock}}；</div>
            <div class="list" v-if="assistancePO.stockStatus == 2">剩余库存：{{residueStock}}</div>
           
          </div>
          <div class="textList">
            <div class="list">活动有效期: 核销成功后，{{assistancePO.expirationDateHour}}：{{assistancePO.expirationDateMinute}}：{{assistancePO.expirationDateSecond}}内</div>
            <div class="list">最大参与助力人数: {{assistancePO.maxPeopleNum}}人</div>
          </div>
          <div class="textList">
            <div class="list">单人分享保底至少获{{assistancePO.guaranteeAmount}}{{assistancePO.integralType == 1 ? 'COCO': '椰分'}}，最多赠送{{assistancePO.maxGiveAmount}}{{assistancePO.integralType == 1 ? 'COCO': '椰分'}}（预计1名新用户助力可获xx椰分，预计1名新用户助力可获xx椰分）</div>
          </div>
          <div class="textList">
            <div class="list blue">根据配置保底最少椰分 x ，最多邀请人数 y，最多赠送椰分 z(含保底) ，则新用户  （z-x）/ y     ±10%浮动；老用户  （z-x）/ y /5     ±10%浮动</div>
          </div>
          <el-row>
            <div class="calculateBox">
              <div class="biaoG">
                <div class="head">
                  <div>每个新用户助力而可获</div>
                  <div>每个老用户助力而可获</div>
                </div>
                <div class="head">
                  <div>{{simulationData.newMin}} ~ {{simulationData.newMax}}</div>
                    <div>{{simulationData.oldMin}} ~ {{simulationData.oldMax}}</div>
                </div>
              </div>
            </div>
          </el-row>
        </template>

        <div class="title">运营补贴活动</div>
        <div class="textList">
          <div class="list">活动状态：{{subsidyVO.subsidyStatus == 1 ? '开启' : '关闭'}}</div>
        </div>
        <template v-if="subsidyVO.subsidyStatus == 1">
          <div class="textList">
            <div class="list">活动支付方式：
              <span  v-if="subsidyVO.payType == 1">现金支付</span>
              <span  v-if="subsidyVO.payType == 2">现金+积分支付</span>
              <span  v-if="subsidyVO.payType == 3">积分支付</span>
            </div>
            <div class="list">补贴方式：
              <span  v-if="subsidyVO.subsidyType == 1">平台补贴</span>
              <span  v-if="subsidyVO.subsidyType == 2">商户补贴</span>
            </div>
            <div class="list" >补贴活动价：
              <span  v-if="subsidyVO.payType == 1">{{subsidyVO.cashAmount}}元</span>
              <span  v-if="subsidyVO.payType == 2">{{subsidyVO.cashAmount}}元+{{subsidyVO.integralAmount}}椰分</span>
              <span  v-if="subsidyVO.payType == 3">{{subsidyVO.integralAmount}}椰分</span>  
            </div>
          </div>
        </template>
      </template>
      <template v-if="currentNavtab == 3">
        <div class="searchBox">
          <div class="lable">活动名称：</div>
          <el-select v-model="activeStatus" placeholder="请选择" size="small" filterable @change="changeActiveStatus">
            <el-option v-for="item in integralTypeList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <template v-if="activeStatus == 1">
          <div class="txtBox"><span class="red">已发放</span> {{incentiveCountData.cocoPortion}}份CoCo奖励，{{incentiveCountData.tfPortion}}份椰分奖励，<span v-for="(item,index) in incentiveCountData.medalCountList" :key="index">{{item.medalPortion}}份{{item.cardName}}勋章；</span> <span class="">累计</span> 发放{{incentiveCountData.cocoAmount}}个CoCo，{{incentiveCountData.tfAmount}}个椰分</div>
          <div class="head">
            <el-form :model="incentiveData" ref="incentiveData" :inline="true">
              <el-form-item label="订单号：" prop="orderNo">
                <el-input
                  v-model="incentiveData.orderNo"
                  placeholder="订单号"
                  clearable
                  style="width: 340px"
                />
              </el-form-item>
              <el-form-item label="手机号：：" prop="phone">
                <el-input
                  v-model="incentiveData.phone"
                  placeholder="手机号"
                  clearable
                  style="width: 340px"
                />
              </el-form-item>
              <el-form-item label="奖励类型：" prop="incentiveTypeList">
                <el-select
                  v-model="incentiveData.incentiveTypeList"
                  filterable
                  multiple
                  placeholder="请选择"
                  clearable
                  style="width: 240px"
                >
                  <el-option
                    v-for="dict in incentiveTypeList"
                    :key="dict.id"
                    :label="dict.value"
                    :value="dict.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="获得时间：" prop="date">
                <el-date-picker v-model="incentiveData.date" type="daterange" value-format="yyyy-MM-dd" size="small" range-separator="至" 
                  start-placeholder="开始日期" end-placeholder="结束日期" @change="getTimeone">
                </el-date-picker>
              </el-form-item> 
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="getIncentiveList"
                    >搜索</el-button
                  >
                  <el-button icon="el-icon-refresh" @click="resetQuery(1)">重置</el-button>
                </el-form-item>
            </el-form>
          </div>
          <div class="listBox">
            <div class="listBox_head" style="margin-bottom: 14px;">
              <export-excel-button title="消费后激励活动" type="2" action="/merchant/lucrative/equity/card/incentive/export" :params="ExportIncentive" />
            </div>
            <el-table v-loading="loading" :data="incentiveList" stripe border>
              <el-table-column label="序号" align="center" type="index" width="64px"/>
              <el-table-column label="订单编号" align="center" prop="orderNo" :show-overflow-tooltip="true"/>
              <el-table-column label="手机号码" align="center" prop="phone" :show-overflow-tooltip="true"/>
              <el-table-column label="奖励coco" align="center" prop="cocoIncentiveAmount" :show-overflow-tooltip="true"/>
              <el-table-column label="奖励椰分" align="center" prop="tfIncentiveAmount" :show-overflow-tooltip="true"/>
              <el-table-column label="奖励勋章" align="center" prop="cardName" :show-overflow-tooltip="true"/>
              <el-table-column label="获得时间" align="center" prop="giveTime" :show-overflow-tooltip="true"/>
            </el-table>
            <pagination
              v-show="incentiveDatatotal > 0"
              :total="incentiveDatatotal"
              :page.sync="incentiveData.pageNum"
              :limit.sync="incentiveData.pageSize"
              @pagination="getIncentiveList"
            ></pagination>
          </div>
        </template>
        <div v-show="activeStatus == 2" >
          <div class="txtBox">累计<span class="red">已分享</span> {{assistanceCountData.orderNum}}单，<span class="red">累计已发放</span>{{assistanceCountData.cocoGiveAmount}}CoCo奖励，{{assistanceCountData.tfGiveAmount}}椰分奖励</div>
          <div class="head">
            <el-form :model="assistanceData" ref="assistanceData" :inline="true">
              <el-form-item label="订单号：" prop="orderNo">
                <el-input
                  v-model="assistanceData.orderNo"
                  placeholder="订单号"
                  clearable
                  style="width: 340px"
                />
              </el-form-item>
              <el-form-item label="手机号：：" prop="phone">
                <el-input
                  v-model="assistanceData.phone"
                  placeholder="手机号"
                  clearable
                  style="width: 340px"
                />
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="getAssistanceList">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery(2)">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="listBox">
            <div class="listBox_head" style="margin-bottom: 14px;">
              <export-excel-button title="同行助力激励活动" action="/merchant/lucrative/equity/card/assistance/export" :params="ExportAssistance" />
            </div>
            <el-table v-loading="loading" :data="assistanceList" stripe border>
              <el-table-column label="序号" align="center" type="index" width="64px"/>
              <el-table-column label="订单编号" align="center" prop="orderNo" :show-overflow-tooltip="true"/>
              <el-table-column label="手机号码" align="center" prop="phone" :show-overflow-tooltip="true"/>
              <el-table-column label="分享助力数" align="center" prop="inviteNum" :show-overflow-tooltip="true"/>
              <el-table-column label="老用户数" align="center" prop="oldCustomer" :show-overflow-tooltip="true"/>
              <el-table-column label="新用户数" align="center" prop="newCustomer" :show-overflow-tooltip="true"/>
              <el-table-column label="奖励coco" align="center" prop="cocoGiveAmount" :show-overflow-tooltip="true"/>
              <el-table-column label="奖励椰分" align="center" prop="tfGiveAmount" :show-overflow-tooltip="true"/>
            </el-table>
            <pagination
              v-show="assistanceDatatotal > 0"
              :total="assistanceDatatotal"
              :page.sync="assistanceData.pageNum"
              :limit.sync="assistanceData.pageSize"
              @pagination="getAssistanceList"
            ></pagination>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
      
  <script>
import Loading from "@/components/Loading/index";
// api
import {
    cardDetail,
    equityDetail,
    getAssistanceList,
    getIncentiveList,
    assistanceCount,
    incentiveCount,
    editStatus,
  
  } from "@/api/merchantsNFR/yeCard"; 
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import WangEditor from "@/components/WangEditor";
import ExportExcelButton from "@/components/ExportExcelButton/index";

export default {
  name: "detail",
  components: {
    ExportExcelButton
  },
  data() {
    return {
      id: '',
      loading: false,
      currentNavtab: 1,
      permissions: 1,
      typeList: [
        {id: '1',value: '赚卡基础信息'},
        {id: '2',value: '激励活动配置'},
        {id: '3',value: '激励活动统计'},
      ],
      integralType: '',
      incentiveTypeList: [
        {id: 1, value: '奖励COCO'},
        {id: 2, value: '奖励椰分'},
        {id: 3, value: '奖励勋章'},
      ],
      integralTypeList: [
        {id: 1, value: '消费后激励活动'},
        {id: 2, value: '同行助力激励活动'},
      ],
      info: {},
      incentivePO: {},//激励后消费活动
      assistancePO: {},//同行助力激励活动
      subsidyVO: {},//运营补贴活动
      interestsList: [{}],
      date: [],
      statusList: [],
      equityInfoList: [],
      functionTypeList:[],
      equityTotal: 0,
      residueStock: 0,
      // 查询参数
      queryParams: {
        startDate: '',
        endDate: '',
        issuerId: '',//发行方
        orderStatus: '',//订单状态
        shopId: '',//发行店铺
        pageNum: 1,
        pageSize: 10,
        orderCardActivityNamePhone: "", //活动名称
      },
      total: 0,//状态字典数组
      incentiveList: [],
      incentiveDatatotal: 0,
      incentiveData: {
        equityCardId: '',
        giveEndTime: '',//获得结束时间
        giveStartTime: '',//获得开始时间
        incentiveTypeList: [],//奖励类型
        orderNo: '',//订单编号
        phone: '',//手机号码
        date: [],
        pageNum: 1,
        pageSize: 10,
      },
      incentiveCountData: {},
      activeStatus: '',
      assistanceDatatotal: 0,
      assistanceList: [],
      assistanceData: {
        equityCardId: '',
        orderNo: '',
        phone: '',
        pageNum: 1,
        pageSize: 10,
      },
      assistanceCountData:{},
      //模拟计算数据
      simulationData: {
        newMin: 0,
        newMax: 0,
        oldMin: 0,
        oldMax: 0,
      },
      rules: {
        name: [
          {
            required: true,
            message: "请填写活动名称",
            trigger: ["change", "bulr"],
          },
        ],
        img: [
          { required: true, message: "请上传弹窗图片", trigger: ["change"] },
        ],
        date: [
          { required: true, message: "请选择活动时间", trigger: ["change"] },
        ],
      },
    };
  },
  computed: {
    ExportIncentive() {
      const params = {
        ...this.incentiveData,
      };
      return params;
    },
    ExportAssistance() {
      const params = {
        ...this.assistanceData,
      };
      return params;
    },
  },
  created() {
    this.id = this.$route.query.id
    this.permissions = this.$route.query.permissions
    this.incentiveData.equityCardId = this.$route.query.id
    this.assistanceData.equityCardId = this.$route.query.id

    this.getInfo();
    this.getStatusList() 
  },
  methods: {
    //获取活动状态字典
    getStatusList() {
      var dictType = "equity_function_type";
      this.$getSelectList(dictType)
        .then((res) => {
          var arr = [
            {
              id: "",
              value: "全部",
            },
          ];
          this.functionTypeList = arr.concat(res.result[0].dictList);
        })
        .finally(() => {});
    },
    //切换选项
    handleTab(id) {
      this.currentNavtab = id;
      this.$forceUpdate()
    },
    
    //获取详情
    getInfo() {
      var id = this.id;
      cardDetail(id).then((res) => {
        this.info = res.result
        this.incentivePO = res.result.incentivePO//激励后消费活动
        this.assistancePO = res.result.assistancePO//同行助力激励活动
        this.subsidyVO = res.result.subsidyVO//运营补贴活动

        if(res.result.incentivePO.equityCardId){
          this.getequityInfo(res.result.incentivePO.equityCardId)
        }
        if(!res.result.incentivePO.stock){
          this.residueStock = 0
        }else{
          this.residueStock = res.result.incentivePO.stock - res.result.incentivePO.soldStock

        }
        if(this.info.assistancePO.guaranteeAmount){
          this.simulation()
        }
      });
    },

    //勋章信息
    getequityInfo(id){
      this.equityInfoList = []
      equityDetail(id).then( res => {
        this.equityInfoList.push(res.result)
      })
    },
    changeActiveStatus(e){
      if(e == 1){
        this.getIncentiveList()
        this.getIncentiveCount() 

      }else if(e == 2){
        this.getAssistanceList()
        this.getAssistanceCount()
      }
    },
    getTimeone(e){
      this.incentiveData.giveStartTime = e[0]
      this.incentiveData.giveEndTime = e[1]
    },
    //消费后激励活动列表
    getIncentiveList(){
      this.loading = true;
      var data = {
        ...this.incentiveData
      }
      getIncentiveList(data).then((response) => {
        response.result.records.forEach(item => {
          for (var key in item) {
            if (!item[key]) {
              item[key] = "-";
            }
          }
        });
        this.incentiveList = response.result.records;
        console.log('this.incentiveList',this.incentiveList)
        this.incentiveDatatotal = response.result.total;
        this.loading = false;
      });
    },
    //同行助力激励活动列表
    getAssistanceList(){
      this.loading = true;
      var data = {
        ...this.assistanceData
      }
      getAssistanceList(data).then((response) => {
        response.result.records.forEach(item => {
          for (var key in item) {
            if (!item[key]) {
              item[key] = "-";
            }
          }
        });
        this.assistanceList = response.result.records;
        this.assistanceDatatotal = response.result.total;
        this.loading = false;
      });
    },
    getIncentiveCount(){
      var id = this.id
      incentiveCount(id).then( res => {
        this.incentiveCountData= res.result
      })
    },
    getAssistanceCount(){
      var id = this.id
      assistanceCount(id).then( res => {
        this.assistanceCountData = res.result
      })
    },
    handleQuery(){},
    resetQuery(type ){
      if(type == 1){
        this.incentiveData.date = []
        this.incentiveData.giveStartTime = ''
        this.incentiveData.giveEndTime = ''
        this.incentiveData.pageNum = 1
        this.resetForm("incentiveData");
        this.getIncentiveList()
      }else if(type == 2){
        this.assistanceData.giveStartTime = ''
        this.assistanceData.giveEndTime = '' 
        this.assistanceData.pageNum = 1
        this.resetForm("assistanceData");
        this.getAssistanceList()
        
      }
    },
    //上下架
    editStatus(row){
      var title = ''
      var type = ''
      if(row.sellStatus == 2){
        title = '是否下架'
        type = 1
      }else if(row.sellStatus == 3){
        title = '是否上架'
        type = 2
      }
      var arr = []
      arr[0] = row.id
      this.$confirm(title, '提示', {
        confirmButtonText: '同意',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(111111111)
        var data = {
          merchantEquityIdList: arr,
          sellStatus: type
        }
        editStatus(data).then((response) => {
          this.getInfo()
          this.$message.success('操作成功')
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
    },
    //编辑
    editClick(row,active) {
      this.$router.push({
        path: "/merchantsNFR/addYeCard",
        query: {
          pathType: 'edit',
          id: row.id,
          active: active,
          permissions: this.permissions
        },
      })
    },
    //模拟计算
    simulation(){
      
      // 则新用户  （z-x）/ y     ±10%浮动；老用户  （z-x）/ y /5     ±10%浮动
      var guaranteeAmount = parseFloat(this.info.assistancePO.guaranteeAmount) //活动保底获得 x
      var maxGiveAmount = parseFloat(this.info.assistancePO.maxGiveAmount) // 最多赠送数量 z
      var maxPeopleNum = parseFloat(this.info.assistancePO.maxPeopleNum)  //每份最大助力人数 y
      
      if(guaranteeAmount && maxGiveAmount && maxPeopleNum){
        //新用户浮动值计算
        var newNum = (maxGiveAmount - guaranteeAmount) / maxPeopleNum 
        // newNum = Math.round(newNum * 100) / 100
        var newMin = newNum - newNum * 0.1  
        var newMax = newNum + newNum * 0.1
        newMin = newMin.toString()
        newMax = newMax.toString()
        this.simulationData.newMin = newMin.substr(0,newMin.indexOf(".")+3)
        this.simulationData.newMax = newMax.substr(0,newMax.indexOf(".")+3)
        
        // 老用户浮动值计算
        var oldNum = (maxGiveAmount - guaranteeAmount) / maxPeopleNum / 5
        // oldNum = Math.round(oldNum * 100) / 100
        var oldMin = oldNum * 0.9
        var oldMax = oldNum * 1.1
        oldMin = oldMin.toString()
        oldMax = oldMax.toString()
        this.simulationData.oldMin = oldMin.substr(0,oldMin.indexOf(".")+3)
        this.simulationData.oldMax = oldMax.substr(0,oldMax.indexOf(".")+3)
      }else{
        this.$message.error(`请输入对应的只在模拟计算`);
      }
    },
    changePrice(e,item,index){
      var priceTotal = 0
      item.detailList = item.detailList.sort((a, b) => b.equityPrice - a.equityPrice); // 从大到小排序
      if(item.equityType == 2){
        console.log('item',item)
        item.detailList.slice(0, item.optionalQuantity).forEach( row => {
          if(row.equityPrice){
            priceTotal = priceTotal + parseFloat(row.equityPrice)
            priceTotal = Math.round(priceTotal * 100) / 100
          }
        })
      }else{
        item.detailList.forEach( row => {
          if(row.equityPrice){
            priceTotal = priceTotal + parseFloat(row.equityPrice)
            priceTotal = Math.round(priceTotal * 100) / 100
          }
        })
      }
      console.log('priceTotal',priceTotal)
      this.oneForm.equityTitleList[index].subtotal = priceTotal
      this.validationEquityTotle()
      this.$forceUpdate()
    },
    // 获取总数
    validationEquityTotle(){
      this.isEquitySubmit = true
      var priceTotal = 0
      this.oneForm.equityTitleList.forEach((item,index)=>{
        // 用户可选数量
        if(item.equityType == 2){
          item.detailList = item.detailList.sort((a, b) => b.equityPrice - a.equityPrice); // 从大到小排序
          item.detailList.slice(0, item.optionalQuantity).forEach( row => {
            if(row.equityPrice){
              priceTotal = priceTotal + parseFloat(row.equityPrice)
              priceTotal = Math.round(priceTotal * 100) / 100

            }
          })
        }else{
          item.detailList.forEach( row => {
            if(row.equityPrice){
              priceTotal = priceTotal + parseFloat(row.equityPrice)
              priceTotal = Math.round(priceTotal * 100) / 100

            }
          })
        }
        if(item.optionalQuantity > item.detailList.length){
          console.log('item.optionalQuantity',item.optionalQuantity)
          console.log('item.detailList.length',item.detailList.length)
          this.isEquitySubmit = false
          console.log('this.isEquitySubmit',this.isEquitySubmit)
        }
      })
      this.equityTotal = priceTotal
      console.log('priceTotal',priceTotal)
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 14px;
}
.main_top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    color: #333;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 20px 10px;
    .lef {
      display: flex;
      justify-content: flex-start;
      border: 1px solid #dfe6ec;
      height: 44px;
      .list {
        height: 40px;
        text-align: center;
        line-height: 40px;
        width: 140px;
        text-align: center;
        border-right: 1px solid #dfe6ec;
        background: #fff;
      }
      .list:nth-last-child(1) {
        border: none;
      }
      .active {
        background: #1890ff;
        color: #fff;
      }
    }
  }
.title{
  font-size: 18px;
  font-weight: bold;
  color: #1890ff;
  padding-left: 10px;
  border-left: 4px solid #1890ff;
  margin: 20px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  span{
    padding-top: 8px;
  }
  .btnBox{
    margin-left: 20px;
  }
}
.textList{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  .list{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
    font-size: 14px;
    color: #333;
    img{
      width: 14px;
      height: 14px;
      margin-right: 6px;
    }
  }
}
.inpBox{
  display: flex;
  justify-content: flex-start;
  .imgBox{
    display: flex;
    justify-content: flex-start;
    img{
      width: 150px;
      height: 150px;
      margin-right: 14px;
      border-radius: 8px;
    }
  }
}
.blue{
  color: #1890ff;
}
.calculateBox{
  display: flex;
  justify-content: center;
  .biaoG{
    margin-right: 20px;
    border: 1px solid #dfe6ec;
    .head{
      display: flex;
      width: 400px;
      border-bottom: 1px solid #dfe6ec;
      div{
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #333;
        height: 50px;
      }
      div:first-child{
        border-right: 1px solid #dfe6ec;
      }
    }
  }
}
.searchBox{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 14px 20px;
  background: #1890ff;
  .lable{
    color: #fff;
    font-size: 16px;
    margin-right: 10px;
  }
}
.equityList{
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  padding: 20px;
  width: 100%;
  margin-bottom: 20px;
  .tips{
    display: flex;
    justify-content: flex-start;
    .list{
      margin-right: 20px;
    }
    margin-bottom: 40px;
  }
  .detail{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid #d4d4d4;

    div{
      flex: 1;
    }
    height: 40px;
  }
  :last-child(1){
    border: none;
  }
}
.txtBox{
  font-size: 14px;
  color: #333;
  padding: 20px 0 ;
}
.red{
  color: red;
}
.button_box {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
</style>
      